<template>
    <div class="song-page">
        <div class="top-content">
            <div class="play-all">
                <SvgIcon class="icon" iconName="bofang1" />
                <span class="text">播放全部</span>
                <span class="total">(共{{ songCount }}首)</span>
            </div>
            <span class="collection">+收藏({{ formatPlayCount(subscribedCount) }})</span>
        </div>
        <div class="song-list">
            <ul>
                <li class="song-item" v-for="(item, index) in songList" :key="item.id">
                    <div class="song-content" @click="playMusicList(index)">
                        <span class="index">{{ index + 1 }}</span>
                        <div class="song-info">
                            <span class="song-name">{{ item.name }}</span>
                            <span class="song-artist">
                                {{ item.ar[0].name }}
                            </span>
                        </div>
                    </div>
                    <div class="icons">
                        <SvgIcon class="icon play" v-if="item.mv" iconName="bofang2" />
                        <SvgIcon class="icon" iconName="hanbaocaidan-copy" />
                    </div>
                </li>
            </ul>
            <div class="bottom-box"></div>
        </div>
    </div>
</template>

<script setup>
import { getSongListAll } from '@/api/song'
import { ref, defineProps, onMounted } from 'vue'
import { useStore } from 'vuex'
const props = defineProps({
  message: Object
})

const store = useStore()

const playMusicList = (index) => {
//   console.log(store.state.playlists)
  //   console.log(store)
  if (store.state.playlists.length === 1) {
    store.commit('setSongList', songList)
    store.commit('setPlaySongIndex', index)
  } else {
    store.commit('setPlaySongIndex', index)
  }
//   console.log(store.state.playlists)
}

const songList = ref([])
// 收藏量
const subscribedCount = props.message.subscribedCount ? props.message.subscribedCount : JSON.parse(sessionStorage.getItem('playlist')).subscribedCount
// 歌单歌曲数
const songCount = props.message.trackCount ? props.message.trackCount : JSON.parse(sessionStorage.getItem('playlist')).trackCount
// 获取歌单歌曲
const getSongs = async () => {
  let id = props.message.id
  if (!id) {
    id = JSON.parse(sessionStorage.getItem('playlist')).id
  }
  console.log(id)
  try {
    const { data } = await getSongListAll(id, 30, 0)
    songList.value = data.songs
    console.log(songList.value)
  } catch (error) {
    console.log(error)
  }
}
// 收藏量处理函数
const formatPlayCount = (count) => {
  if (count > 100000000) return (count / 100000000).toFixed(1) + '亿'
  if (count > 10000) return (count / 10000).toFixed(1) + '万'
  return count
}

// 获取最后一行的高度
onMounted(() => {
//   const bootombox = document.querySelector('ul').lastChild.previousSibling
//   console.log(bootombox)
  getSongs()
})
</script>

<style lang="scss" scoped>
.song-page {
    padding: .3rem;
    background-color: white;
    border-start-start-radius: .6rem;
    border-start-end-radius: .6rem;
    :deep(.icon) {
        width: .5rem;
        height: .5rem;
    }
}
.top-content {
    display: flex;
    justify-content: space-between;
    .play-all {
        display: flex;
        align-items: center;
    }
    .text {
        margin-left: .3rem;
    }
    .total {
        color: #afafaf;
    }
    .collection {
        padding: 0 .3rem;
        color: #fff;
        line-height: .8rem;
        background-color: red;
        border-radius: .4rem;
    }
}
.song-list {
    margin-top: .3rem;
    .song-item {
        display: flex;
        justify-content: space-between;
        padding: .2rem;
    }
    .song-content {
        display: flex;
        justify-content: center;
        align-items: center;
        .index {
            color: #afafaf;
        }
    }
    .song-info {
        display: flex;
        flex-direction: column;
        padding-left: .3rem;
        .song-artist {
            display: flex;
            margin-top: .1rem;
            font-size: .24rem;
            color: #afafaf;
        }
    }
    .icons {
        display: flex;
        align-items: center;
        .play {
            margin-right: .5rem;
        }
    }
}
</style>
